<template>
  <div v-loading="loading">
    <!-- 用于添加编辑 v-if="type == 'add' || type == 'edit'" -->
    <div class="detail" v-if="type == 'add' || type == 'edit'">
      <!-- <div class="add_btn">
        <div class="label">类型</div>
        <div>
          <el-radio-group
            v-removeAriaHidden
            @change="setLearnState"
            v-model="form.mustLearnStatus"
          >
            <el-radio :label="2">选学</el-radio>
            <el-radio :label="1">必学</el-radio>
          </el-radio-group>
        </div>
      </div> -->
      <!-- 教学内容 -->
      <div class="step_box">
        <div class="step_box_title">
          <div class="label_title">
            教学内容
            <div class="stepbox_tip">
              注：内容可以通过拖拽来调整排序, 双击标题可编辑标题
            </div>
          </div>
          <div class="bottom_txt">
            视频支持上传AVC(H264)编码的mp4并小于300MB
          </div>
        </div>

        <!-- 环节列表 -->
        <input
          style="display: none"
          class="uploadContain_input"
          type="file"
          accept=".gif, .png, .jpeg,  .jpg,  .mp4, .webm, .pdf, .docx, .doc, .rtf, .pptx, .ppt,  .xls, .xlsx ,.wps ,.ofd
        ,.txt ,.js ,.json ,.css ,.sql ,.xml ,.java ,.cs(c#)"
          ref="fileInput"
          @change="uploadFile($event)"
          multiple
        />
        <div class="stepbox_tabs">
          <div class="flex">
            <div
              class="tabs"
              :style="{ maxWidth: form.type == 4 ? '100%' : '500px' }"
            >
              <el-tabs
                ref="tabs"
                v-model="stepIndex"
                type="card"
                @tab-remove="handleTabsEdit"
              >
                <el-tab-pane
                  closable
                  v-for="(item, index) in form.ccCourseContentList"
                  :key="index"
                  :name="index + ''"
                >
                  <template v-slot:label>
                    <span
                      :class="{
                        work_type:
                          item.contentType == 1 ||
                          item.contentType == 3 ||
                          !item.contentType,
                        things_type: item.contentType == 2,
                      }"
                    >
                      <el-input
                        clearable
                        :ref="`contentNameRef_${index}`"
                        v-show="item.showEdit"
                        @blur="changeContentName(item)"
                        v-model="item.contentName"
                        class="content_name"
                        :class="{
                          work_ipt_type:
                            item.contentType == 1 || item.contentType == 3,
                          things_ipt_type: item.contentType == 2,
                        }"
                        type="text"
                      ></el-input>
                      <span
                        v-show="!item.showEdit"
                        @dblclick="changeShowEdit(item, index)"
                      >
                        {{
                          item.contentName
                            ? item.contentName
                            : `内容${index + 1}`
                        }}
                      </span>
                    </span>
                  </template>
                </el-tab-pane>
                <el-tab-pane
                  key="add"
                  name="add"
                  :closable="false"
                  v-if="form.type == 4"
                >
                  <div
                    slot="label"
                    class="addStep flex shou"
                    @click="handleAddStep(3)"
                    v-preventReClick
                  >
                    + 添加考核内容
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- 添加 信息页 工作页按钮 -->
            <div class="flex addbtns" v-if="form.type == 3">
              <div
                @click="handleAddStep(2)"
                v-if="this.$route.query.modelType == 1"
                class="btn_items"
              >
                <i class="el-icon-plus"></i>
                工作页
              </div>
              <div @click="handleAddStep(1)" class="btn_item">
                <i class="el-icon-plus"></i>
                {{ this.$route.query.modelType == 0 ? '内容' : '信息页' }}
              </div>
              <div
                v-if="this.$route.query.modelType == 1"
                @click="handleUpateStep()"
                class="btn_edit"
              >
                编辑
              </div>
            </div>
          </div>

          <!-- n内容 -->
          <div
            class="tabContent"
            v-for="(item, index) in form.ccCourseContentList"
            :key="index"
            v-if="index == stepIndex"
          >
            <div class="flex addflies">
              <div>
                <div
                  class="addFile flex shou"
                  style="background: #28b28b;width: 144px"
                  @click="uploadType('上传教学课件')"
                >
                  <img
                    src="@/assets/images/courseAdd/upload.png"
                    alt="加载失败"
                  />从本地上传附件
                </div>
                <div
                  @click="openfile(item1.fileUrl, item1.fileName, item1.type)"
                  class="file flex shou"
                  v-for="(item1, index1) in item.ccCourseContentFileList"
                  v-if="item1.type == 1"
                  :key="index1"
                >
                  <img
                    class="icon"
                    src="@/assets/images/hxz.png"
                    alt="加载失败"
                  />
                  <img
                    class="iconactive"
                    src="@/assets/images/lvhxz.png"
                    alt="加载失败"
                  />
                  <div class="name overTxt">{{ item1.fileName }}</div>
                  <img
                    @click.stop="delCourseware('三维课件', index1)"
                    class="del"
                    src="@/assets/images/del.png"
                    alt="加载失败"
                  />
                </div>
              </div>
              <div style="margin-left: 24px" v-if="isopenResourcce">
                <div
                  class="addFile flex shou"
                  style="background: #5292f7;width: 158px"
                  @click="uploadType('资源库上传')"
                >
                  <img
                    src="@/assets/images/courseAdd/upload.png"
                    alt="加载失败"
                  />从资源库选择附件
                </div>
                <div
                  @click="openfile(item1.fileUrl, item1.fileName, item1.type)"
                  class="file flex shou"
                  v-for="(item1, index1) in item.ccCourseContentFileList"
                  v-if="item1.type == 2"
                  :key="index1"
                >
                  <img
                    class="icon"
                    src="@/assets/images/hxz.png"
                    alt="加载失败"
                  />
                  <img
                    class="iconactive"
                    src="@/assets/images/lvhxz.png"
                    alt="加载失败"
                  />
                  <div class="name overTxt">{{ item1.fileName }}</div>
                  <img
                    @click.stop="delCourseware('三维课件', index1)"
                    class="del"
                    src="@/assets/images/del.png"
                    alt="加载失败"
                  />
                </div>
              </div>
              <div style="margin-left: 24px">
                <div
                  class="addFile flex shou"
                  style="background: #f89a33;width: 116px"
                  @click="uploadType('上传三维课件')"
                >
                  <img
                    src="@/assets/images/courseAdd/upload.png"
                    alt="加载失败"
                  />插入元智书
                </div>
                <div
                  @click="openfile(item1.fileUrl, item1.fileName, item1.type)"
                  class="file flex shou"
                  v-for="(item1, index1) in item.ccCourseContentFileList"
                  v-if="item1.type == 0"
                  :key="index1"
                >
                  <img
                    class="icon"
                    src="@/assets/images/hxz.png"
                    alt="加载失败"
                  />
                  <img
                    class="iconactive"
                    src="@/assets/images/lvhxz.png"
                    alt="加载失败"
                  />
                  <div class="name overTxt">{{ item1.fileName }}</div>
                  <img
                    @click.stop="delCourseware('三维课件', index1)"
                    class="del"
                    src="@/assets/images/del.png"
                    alt="加载失败"
                  />
                </div>
              </div>
            </div>
            <wangEditor
              height="646px"
              :uuid="courseForm.dirName"
              :editorValue.sync="item.description"
              :courseId="courseForm.courseId"
              @turnWord="uploadWordToNode($event, item)"
            />
          </div>
        </div>
      </div>
      <add3DCourse :open.sync="add3DOpen" @refresh="add3DReturn"></add3DCourse>
    </div>
    <!-- 用于查看 和 审核的时候 -->
    <div v-else class="lookDetail">
      <!-- 环节列表 -->
      <div class="steps">
        <el-tabs v-model="stepIndex">
          <el-tab-pane
            v-for="(item, index) in form.ccCourseContentList"
            :key="index"
            :name="index + ''"
          >
            <template v-slot:label>
              <span
                :class="{
                  work_type:
                    item.contentType == 1 ||
                    item.contentType == 3 ||
                    !item.contentType,
                  things_type: item.contentType == 2,
                }"
              >{{
                  item.contentName ? item.contentName : `内容${index + 1}`
                }}</span
              >
            </template>
            <div
              class="content"
              v-html="$renderedDescription(item.description)"
            ></div>
            <div
              class="fileTitle"
              v-if="
                item.ccCourseContentFileList &&
                item.ccCourseContentFileList.length > 0
              "
            >
              教学课件:
            </div>
            <div class="flex files" v-if="item.ccCourseContentFileList">
              <div
                class="flex files_file shou"
                @click="openfile(item1.fileUrl, item1.fileName, item1.type)"
                v-for="(item1, index1) in item.ccCourseContentFileList"
                :key="index1"
              >
                <img
                  :src="returnIcon(item1.fileUrl, item1.type)"
                  alt="加载失败"
                  class="icon"
                />
                <div class="overTxt filename">{{ item1.fileName }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 底部按钮用于  -->
    <div class="detailbottom flexBet" style="">
      <div>
        <div class="flex" v-if="showRoot">
          <!-- 用于添加和编辑 可添加考核和练习 -->
          <div class="flex" v-if="type == 'add' || type == 'edit'">
            <!-- 练习 -->
            <div
              @click.stop="
                handleAddExam(3, selectedContentId, form.practiceId, 'add')
              "
              class="flex rela shou"
              :class="[
                form.practiceId
                  ? 'practiceBtn normalBtn'
                  : 'noPracticeBtn  normalnoBtn',
                (!form.practicePublish ||
                  (showPublishSign && !form.practicePublish)) &&
                form.practiceId
                  ? 'not_publish_practice'
                  : '',
              ]"
            >
              <img
                class="activeIcon"
                src="@/assets/images/courseAdd/activeAdd.png"
                alt="加载失败"
              />
              <img
                class="icon"
                src="@/assets/images/courseAdd/add.png"
                alt="加载失败"
              />练习
              <img
                @click.stop="handleDelExam(3, selectedContentId)"
                class="absolute del"
                src="@/assets/images/close.png"
                alt="加载失败"
              />
            </div>
            <!-- 作业 -->
            <div
              @click.stop="
                handleAddExam(6, selectedContentId, form.homeworkId, 'add')
              "
              class="flex rela shou"
              :class="[
                form.homeworkId
                  ? 'homeworkBtn  normalBtn'
                  : 'noHomeworkBtn  normalnoBtn',
                (!form.homeworkPublish ||
                  (showPublishSign && !form.homeworkPublish)) &&
                form.homeworkId
                  ? 'not_publish_homework'
                  : '',
              ]"
            >
              <img
                class="activeIcon"
                src="@/assets/images/courseAdd/activeAdd.png"
                alt="加载失败"
              />
              <img
                class="icon"
                src="@/assets/images/courseAdd/add.png"
                alt="加载失败"
              />作业
              <img
                @click.stop="handleDelExam(6, selectedContentId)"
                class="absolute del"
                src="@/assets/images/close.png"
                alt="加载失败"
              />
            </div>
            <!-- 考核 -->
            <div
              @click.stop="
                handleAddExam(1, selectedContentId, form.examId, 'add')
              "
              class="flex rela shou"
              :class="[
                form.examId ? 'examBtn normalBtn' : 'noExamBtn normalnoBtn',
                (!form.examPublish || (showPublishSign && !form.examPublish)) &&
                form.examId
                  ? 'not_publish_exam'
                  : '',
                '',
              ]"
            >
              <img
                class="activeIcon"
                src="@/assets/images/courseAdd/activeAdd.png"
                alt="加载失败"
              />
              <img
                class="icon"
                src="@/assets/images/courseAdd/add.png"
                alt="加载失败"
              />考核
              <img
                @click.stop="handleDelExam(1, selectedContentId)"
                class="absolute del"
                src="@/assets/images/close.png"
                alt="加载失败"
              />
            </div>
            <!--  v-if="
                  (!form.examPublish ||
                    (showPublishSign && !form.examPublish)) &&
                  form.examId &&
                  (!form.homeworkPublish ||
                    (showPublishSign && !form.homeworkPublish)) &&
                  form.homeworkId &&
                  (!form.practicePublish ||
                    (showPublishSign && !form.practicePublish)) &&
                  form.practiceId
                " -->
            <template>
              <div class="add_sign">注：练习、作业、考核发布后生效</div>
            </template>
          </div>
          <!-- 用于审核和查看时候显示 考核按钮 -->
          <div class="flex" v-else>
            <div
              @click.stop="
                handleAddExam(3, selectedContentId, form.practiceId, 'detail')
              "
              v-if="form.practiceId"
              :class="{
                not_publish_practice:
                  !form.practicePublish ||
                  (showPublishSign && !form.practicePublish),
              }"
              class="practiceBtn normalBtn flex rela shou"
            >
              <img
                class="icon"
                src="@/assets/images/courseAdd/add.png"
                alt="加载失败"
              />练习
            </div>
            <div
              @click.stop="
                handleAddExam(6, selectedContentId, form.homeworkId, 'detail')
              "
              v-if="form.homeworkId"
              :class="{
                not_publish_homework:
                  !form.homeworkPublish ||
                  (showPublishSign && !form.homeworkPublish),
              }"
              class="homeworkBtn normalBtn flex rela shou"
            >
              <img
                class="icon"
                src="@/assets/images/courseAdd/add.png"
                alt="加载失败"
              />作业
            </div>
            <div
              @click.stop="
                handleAddExam(1, selectedContentId, form.examId, 'detail')
              "
              v-if="form.examId"
              :class="{
                not_publish_exam:
                  !form.examPublish || (showPublishSign && !form.examPublish),
              }"
              class="examBtn normalBtn flex rela shou"
            >
              <img
                class="icon"
                src="@/assets/images/courseAdd/add.png"
                alt="加载失败"
              />考核
            </div>
            <template>
              <div class="add_sign">注：练习、作业、考核发布后生效</div>
            </template>
          </div>
        </div>
      </div>
      <div class="flex" v-if="type == 'audit'">
        <el-button v-preventReClick type="primary" @click="goBack">
          退 出
        </el-button>
        <el-button v-preventReClick @click="reject" type="danger">
          驳回
        </el-button>
        <el-button v-preventReClick @click="audit" type="primary">
          通过审核
        </el-button>
      </div>
      <div class="flex" v-else>
        <el-button
          v-preventReClick
          v-if="type == 'add' || type == 'edit'"
          type="primary"
          @click="handleSubmitForm()"
        >
          保 存
        </el-button>
        <el-button
          v-preventReClick
          v-if="type == 'detail'"
          type="primary"
          @click="goBack"
        >
          退 出
        </el-button>
      </div>
    </div>
    <rejectDia
      type="1"
      :open.sync="rejectOpen"
      :propform="courseForm"
      @refresh="goBack"
    ></rejectDia>
    <fileDrawer
      :show.sync="drawer"
      :url="drawerurl"
      :name="drawername"
      :type="drawertype"
      :isHttps="isHttps"
    ></fileDrawer>
    <!-- 内容分类 -->
    <taskClassificate
      :open.sync="taskClassificate_open"
      :arr="taskClassificate_arr"
      @refresh="refreshContent"
    ></taskClassificate>
    <Uploadfromlibrary
      ref="uploadfromlibrary"
      @uploadlibraryFile="addlibraryFile"
    ></Uploadfromlibrary>
  </div>
</template>

<script>
import Uploadfromlibrary from '@/views/tea_course/components/uploadfromLibrary.vue'
import fileDrawer from '@/components/fileDrawer.vue'
import taskClassificate from './taskClassificate.vue'
import wangEditor from '@/components/Editor/wangEditor.vue'
import add3DCourse from './add3DCourse'
import Sortable from 'sortablejs'
import { fammterString, uploadOSS } from '@/api/upload'
import { returnIcon, getUniqueFileName } from '@/utils/util'
import {
  getCourseIndexDetial,
  addCourseContent,
  deleteCourseContent,
  editCourseContent,
  editCourseIndex,
  sortCourseContent,
  editCourseStatus
} from '@/api/course/course'
import { addExam, deleteExam } from '@/api/exam/exam'
import { getPost_school } from '@/api/schoolOrganization/schoolInfo'
import rejectDia from './rejectDia.vue'

export default {
  components: {
    add3DCourse,
    wangEditor,
    rejectDia,
    fileDrawer,
    taskClassificate,
    Uploadfromlibrary
  },
  props: {
    enterType: {
      type: String,
      default: ''
    },
    showRoot: {
      type: Boolean,
      default: true
    },
    errorIdArr: {
      type: [Array],
      default: () => {
        return []
      }
    },
    type: String,
    selectedContentId: [String, Number],
    topicCategoryId: {},
    courseForm: [Object],
    tabIndex: [String, Number],
    //删除过的 树节点id
    deleteId: [String, Number],
    isopenResourcce: {
      type: Boolean,
      default: false
    },
    status: {
      type: [String, Number]
    }
  },
  data() {
    return {
      rejectOpen: false,
      info: {},
      taskClassificate_open: false,
      taskClassificate_arr: [],
      sortArr: [],
      examPaperOpen: false,
      isHttps: false,
      lookState: false,
      isOfflineExam: false,
      loading: false,
      showPublishSign: false,
      // 文件组件弹框
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      returnIcon: function(url, type) {
        return returnIcon(url, type)
      },
      //教学内容选中的下标
      stepIndex: '0',
      // 表单参数
      //   文件类型 0：3d 1:不是3d
      form: {},
      //   上传分类型
      utype: '',
      //   添加3d课件弹窗
      add3DOpen: false,
      // 添加练习组件
      practiceOpen: false,
      practiceNum: 100,
      // 添加线上考核组件
      OnlineAssessmentOpen: false,
      OnlineAssessmentOpenNum: 100,
      // 添加线下考核组件
      OfflineAssessmentOpen: false,
      propsExamId: '',
      //1  新增   2编辑
      editType: 1,
      //1考核  3练习
      examType: 1
    }
  },
  created() {
  },
  beforeDestroy() {
    if (
      (this.type == 'add' || this.type == 'edit') &&
      this.tabIndex == 1 &&
      this.form.id
    ) {
      this.submitForm()
    }
  },
  computed: {},
  watch: {
    stepIndex(newValue, oldValue) {
      console.log('newValue>>>>>oldValue', newValue, oldValue)
      //在当前页面把选中的下标保存
      this.form.lastStepIndex = newValue
      if (this.type == 'add' || this.type == 'edit') {
        if (oldValue != 'add') {
          this.updateCourseContent(newValue, oldValue)
        }
      }
      const videos = document.querySelectorAll('video')
      if (videos && videos.length > 0) {
        videos.forEach((video) => {
          video.pause()
        })
      }
    },
    //监听form.id   来判断同组件切换时   保存上一个内容
    form: {
      handler(newValue, oldValue) {
        //判断有旧的form.id   说明是同组件切换   没有则证明是初次加载该组件
        //判断有旧的form.id  是否变化   有变化说明是组件切换了数据  将旧的id数据保存
        //deleteId>>>>>>>>>>删除过的 树节点id  如果oldValue.id==deleteId 说明oldValue节点已经被删除了，所以不用保存oldValue数据
        if (
          oldValue.id &&
          oldValue.id != newValue.id &&
          this.tabIndex == 1 &&
          this.deleteId != oldValue.id
        ) {
          console.log(this.deleteId)
          this.submitForm(oldValue)
        }
      }
    },
    selectedContentId: {
      handler() {
        this.reset()
        this.stepIndex = '0'
        this.getInfo()
        if (this.type == 'audit') {
          this.getSchoolInfo()
        }
      },
      immediate: true
    }
  },
  methods: {
    /* 驳回 */
    reject() {
      this.rejectOpen = true
    },
    /** 获取学校信息 */
    async getSchoolInfo() {
      let res = await getPost_school()
      const { code, data } = res
      if (code == 200) {
        this.info = data
      }
    },
    /* 通过审核 */
    audit() {
      this.$confirm(`是否确认通过审核?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在处理…',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.6)'
          })
          //当分院审核时（this.status == "30"）
          if (this.status == '30') {
            //type  类型:0-高用,1-停用,2-提交审校,了-撤回审校,4-分院审校,5-学校审校,6-驳回
            let params = {
              type: 4,
              courseId: this.form.courseId
            }
            let res = await editCourseStatus(params.type, params.courseId)
            if (res.code == 200) {
              loading.close()
              // 判断审核配置  是否需要学校审核   不需要学校审核则分院直接审核通过
              if (this.info.courseNeedCheckSchool == 1) {
                this.$modal.msgSuccess('审核已通过，待学校审核')
              } else {
                //分院直接审核通过
                this.$modal.msgSuccess('通过审核成功')
              }
              this.$store.dispatch(
                'tagsView/delView',
                this.$router.currentRoute
              )
              setTimeout(() => {
                this.$router.push({ path: '/course/course' })
              }, 100)
            } else {
              loading.close()
            }
          } else {
            //学校审核
            //type  类型:0-高用,1-停用,2-提交审校,了-撤回审校,4-分院审校,5-学校审校,6-驳回
            let params = {
              type: 5,
              courseId: this.form.courseId
            }
            let res = await editCourseStatus(params.type, params.courseId)
            if (res.code == 200) {
              loading.close()
              if (this.status == '50') {
                this.$EventBus.$emit('courseStatusRefresh', true)
              }
              this.$modal.msgSuccess('通过审核成功')
              this.$store.dispatch(
                'tagsView/delView',
                this.$router.currentRoute
              )
              setTimeout(() => {
                this.$router.push({ path: '/course/course' })
              }, 100)
            } else {
              loading.close()
            }
          }
        })
        .catch(() => {
        })
    },

    async setLearnState(state) {
      const loading = this.$loading({
        lock: true,
        text: '正在设置...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.3)'
      })
      try {
        let params = {
          ...this.form
        }
        delete params.name
        let res = await editCourseIndex(params)
        if (res) {
          this.$modal.msgSuccess('设置成功')
          let obj = {
            value: state,
            key: 'mustLearnStatus'
          }
          this.$emit('updateLearnStatus', obj)
          loading.close()
        }
      } catch (e) {
        console.log(e)
      } finally {
        loading.close
      }
    },
    //无感更新树结构状态  1 正常考核（个人）  2 小组考核（考核）3 正常作业（个人）  4 小组作业（考核）
    updateSubmitType(e) {
      console.log('无感更新树结构状态', e)

      this.$emit('updateSubmitType', {
        key: e.examType == 'exam' ? 'submitType' : 'homeworkSubmitType',
        value: e.submitType
      })
      this.$emit('updateSubmitType', {
        key:
          e.examType == 'exam'
            ? 'leaderScorePercent'
            : 'homeworkLeaderScorePercent',
        value: e.leaderScorePercent
      })
    },
    //
    updatePublishSign(e) {
      console.log('updatePublishSign', e)
      //1:考核
      if (e.examType == 1) {
        this.form.examPublish = e.publish
      } else if (e.examType == 3) {
        this.form.practicePublish = e.publish
      } else {
        this.form.homeworkPublish = e.publish
      }
      this.showPublishSign = e.showPublishSign
    },
    //添加 考核 | 练习 |作业
    async handleAddExam(formatType, selectedContentId, paperId, state) {
      localStorage.setItem('uuid', this.courseForm.dirName)
      let queryPaperId = paperId
      let enterState = state
      if (!queryPaperId) {
        enterState = 'add'
        const loading = this.$loading({
          lock: true,
          text: '正在生成试卷...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
          let res = await addExam(formatType, selectedContentId)
          if (res.code == 200) {
            queryPaperId = res.data
            let formatTypeKey = {
              1: 'examId',
              6: 'homeworkId',
              3: 'practiceId'
            }
            this.form[formatTypeKey[formatType]] = res.data
            let obj = {
              key: formatTypeKey[formatType],
              id: res.data
            }
            this.$emit('addExam', obj)
          }
        } catch (e) {
          console.error(e)
        } finally {
          loading.close()
        }
      } else {
        enterState = 'edit'
      }
      if (state == 'detail') {
        enterState = 'detail'
      }
      /**
       *  formatType:1.考核 6.作业 3.练习
       */
      const routeData = this.$router.resolve({
        path: '/testPaperFormation', // 或使用 name: 'route-name'
        query: {
          formatType: formatType,
          paperId: queryPaperId,
          courseId: this.form.courseId,
          indexId: selectedContentId,
          enterState: enterState,
          courseType: this.courseForm.courseType,
          principalId: this.courseForm.principalId,
        }
      })
      window.open(routeData.href, '_blank')
    },
    //删除 考核 | 练习
    handleDelExam(type, contentId) {
      let text = {
        1: '确认删除考核?',
        6: '确认删除作业?',
        3: '确认删除练习?'
      }
      let typeKey = {
        1: 'examId',
        6: 'homeworkId',
        3: 'practiceId'
      }
      this.$confirm(text[type], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await deleteExam(type, contentId)
        if (res.code == 200) {
          this.form[typeKey[type]] = null
          this.$modal.msgSuccess('删除成功')
          let obj = {
            key: typeKey[type],
            id: null
          }
          this.$emit('addExam', obj)
        }
      })
    },
    //更新上一个  内容|知识点
    async updateCourseContent(newValue, oldValue) {
      if (
        !this.form.ccCourseContentList ||
        !this.form.ccCourseContentList[oldValue]
      ) {
        return
      }
      let params = this.form.ccCourseContentList[oldValue]
      delete params.sort
      await editCourseContent(params)
      console.log(oldValue, 'oldValue')
      console.log(params, '更新教学内容')
    },
    uploadWordToNode(formData, item) {
      item.description += formData
    },
    changeShowEdit(item, index) {
      item.showEdit = true
      this.$nextTick(() => {
        this.$refs[`contentNameRef_${index}`][0].focus()
      })
      // 保证页面重绘
      this.$forceUpdate()
    },
    changeContentName(item) {
      item.showEdit = false
      this.$forceUpdate()
    },
    // 打开文件
    openfile(url, name, type) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (type == '1') {
        this.isHttps = false
        if (arr.indexOf(uploadType) > -1) {
          this.drawer = true
          this.drawerurl = url
          this.drawername = name
          this.drawertype = type
        } else {
          window.open(url, '_blank')
        }
      } else {
        this.drawer = true
        this.isHttps = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = type
      }
    },
    /* 三维课件组件返回 (调用上传课件接口)*/
    add3DReturn(e) {
      e.contentId = this.form.ccCourseContentList[this.stepIndex].contentId
      if (
        !this.form.ccCourseContentList[this.stepIndex].ccCourseContentFileList
      ) {
        this.form.ccCourseContentList[this.stepIndex].ccCourseContentFileList =
          []
      }
      this.form.ccCourseContentList[
        this.stepIndex
        ].ccCourseContentFileList.push(e)
      this.$modal.msgSuccess('插入成功')
    },

    // 按钮来判断上传类型 并记录
    uploadType(type) {
      this.utype = type
      //上传三维课件
      if (type == '上传三维课件') {
        this.add3DOpen = true
      } else if (type == '上传教学课件') {
        this.$refs.fileInput.click()
      } else {
        this.$refs.uploadfromlibrary.show(this.courseForm.courseId)
      }
    },
    async uploadFile(event) {
      const files = Array.from(event.target.files)
      if (files.length === 0) return

      // 1. 获取当前已存在的文件名（防止重名）
      const existingNames =
        this.form.ccCourseContentList[
          this.stepIndex
          ].ccCourseContentFileList?.map((f) => f.fileName) || []

      // 2. 构建上传路径
      const path = fammterString(2, this.courseForm.dirName)

      // 3. 存储上传成功的文件
      const successfulFiles = []

      try {
        // 4. 逐个上传（模拟 v-for 逻辑）
        for (const file of files) {
          let newName = file.name
          const nameWithoutExt = newName.substring(0, newName.lastIndexOf('.'))
          const ext = newName.substring(newName.lastIndexOf('.'))

          let counter = 1
          // 生成唯一文件名
          while (existingNames.includes(newName)) {
            newName = `${nameWithoutExt}(${counter})${ext}`
            counter++
          }

          // 创建重命名后的 File 对象
          const renamedFile = new File([file], newName, { type: file.type })

          // 5. 单个上传（关键：传 renamedFile，而不是 files）
          // 假设 uploadOSS(file, path, true, event) 支持单个 file 上传
          let res
          try {
            res = await uploadOSS(renamedFile, path, true, event)
            // 假设 res 是 { url: '...', name: '...' } 或 [ { url, name } ]
            if (Array.isArray(res)) {
              res = res[0] // 取第一个
            }
          } catch (uploadError) {
            console.error(`文件上传失败: ${newName}`, uploadError)
            this.$modal.msgWarning(`文件 "${newName}" 上传失败`)
            continue // 跳过失败的文件
          }

          // 6. 添加到成功列表
          successfulFiles.push({
            fileUrl: res.url,
            fileName: res.name || newName, // 优先用返回的 name
            temporaryState: 0,
            indexId: this.selectedContentId,
            courseId: this.courseForm.courseId,
            type: 1,
            contentId: this.form.ccCourseContentList[this.stepIndex].contentId
          })

          // 7. 更新 existingNames，防止后续文件命名冲突
          existingNames.push(newName)
        }

        // 8. 更新到表单
        const target = this.form.ccCourseContentList[this.stepIndex]
        if (!target.ccCourseContentFileList) {
          target.ccCourseContentFileList = []
        }
        target.ccCourseContentFileList =
          target.ccCourseContentFileList.concat(successfulFiles)

        // 9. 重置 input
        event.target.value = ''

        // 10. 提示成功
        if (successfulFiles.length > 0) {
          this.$modal.msgSuccess(`上传成功 (${successfulFiles.length} 个文件)`)
        } else {
          this.$modal.msgError('所有文件上传失败')
        }
      } catch (error) {
        console.error('上传过程出错', error)
        this.$modal.msgError('上传失败，请重试')
      }
    },
    // 删除课件
    delCourseware(type, fileIndex) {
      this.$confirm(`是否确认删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 调用删除课件接口
          this.form.ccCourseContentList[
            this.stepIndex
            ].ccCourseContentFileList.splice(fileIndex, 1)
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    //获取内容层信息
    async getInfo() {
      this.loading = true
      let res = await getCourseIndexDetial(this.selectedContentId)
      const { code, data } = res
      if (code == 200) {
        //把当前选中的教学内容下标存起来，方便后续保存旧组件数据时使用
        data.lastStepIndex = this.stepIndex
        this.loading = false
        let arr = []
        if (data.ccCourseContentList && data.ccCourseContentList.length > 0) {
          for (const courseContentItem of data.ccCourseContentList) {
            if (courseContentItem.description) {
              courseContentItem.description =
                courseContentItem.description.replace(
                  /(<td[^>]*>)([\s\S]*?)(<img[^>]*>)([\s\S]*?)(<\/td>)/gi,
                  (match, tdOpen, beforeImg, imgTag, afterImg, tdClose) => {
                    // 移除p标签
                    const removePTags = (str) =>
                      str.replace(/<\/?p[^>]*>/g, '')
                    // 处理前后换行
                    const processedBefore = beforeImg.trim()
                      ? removePTags(beforeImg) + '<br>'
                      : ''
                    const processedAfter = afterImg.trim()
                      ? '<br>' + removePTags(afterImg)
                      : ''

                    return (
                      tdOpen +
                      processedBefore +
                      imgTag +
                      processedAfter +
                      tdClose
                    )
                  }
                )
            }
            let obj = {
              ...courseContentItem,
              showEdit: false
            }
            arr.push(obj)
          }
        }
        this.form = data
        this.$nextTick(() => {
          this.dragTab()
        })
      }
    },
    // 修改教学内容
    handleUpateStep() {
      this.taskClassificate_arr = this.form.ccCourseContentList
      this.taskClassificate_open = true
    },
    // 添加教学内容
    async handleAddStep(e) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.3)'
      })
      try {
        if (this.form.ccCourseContentList == null) {
          this.form.ccCourseContentList = []
        }
        let lable
        if (e == 3) {
          lable = '考核内容' + (this.form.ccCourseContentList.length + 1)
        } else if (e == 1) {
          lable =
            (this.$route.query.modelType == 0 ? '内容' : '信息页') +
            (this.form.ccCourseContentList.filter(
                (item) => item.contentType === 1
              ).length +
              1)
        } else {
          lable =
            '工作页' +
            (this.form.ccCourseContentList.filter(
                (item) => item.contentType === 2
              ).length +
              1)
        }
        let params = {
          ccCourseContentFileList: [],
          contentName: lable,
          contentType: e,
          indexId: this.selectedContentId,
          sort: this.form.ccCourseContentList.length + 1,
          contentUrl: '',
          temporaryState: 0
        }
        let res = await addCourseContent(params)
        const { code, data } = res
        if (code == 200) {
          this.form.ccCourseContentList.push({
            ...params,
            contentId: data,
            showEdit: false
          })
          if (this.sortArr.length > 0) {
            this.sortArr.push({
              ...params,
              contentId: data,
              showEdit: false
            })
          }
          loading.close()
          this.$nextTick(() => {
            this.stepIndex = this.form.ccCourseContentList.length - 1 + ''
            this.dragTab()
            const navWrap = this.$refs.tabs.$el.querySelector('.el-tabs__nav')
            if (navWrap.scrollWidth > 762) {
              navWrap.style.transform = `translateX(${
                (navWrap.scrollWidth - 755) * -1 - 100
              }px)`
            }
          })
        }
      } catch (e) {
        console.log(e)
        loading.close()
      }
    },
    // 添加教学内容返回
    async refreshContent() {
      this.getInfo()
      this.stepIndex = '0'
    },
    // 删除教学内容
    handleTabsEdit(targetName) {
      for (const contentTemporary of this.form.ccCourseContentList) {
        if (contentTemporary.showEdit) {
          return
        }
      }
      this.$confirm(`是否确认删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let res = await deleteCourseContent(
            this.form.ccCourseContentList[targetName].contentId
          )
          if (res.code == 200) {
            this.$modal.msgSuccess('删除成功')
            this.form.ccCourseContentList.splice(targetName, 1)
            this.$nextTick(() => {
              this.dragTab()
            })
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    // 拖拽教学内容
    dragTab() {
      const tbody = document.querySelector('.stepbox_tabs .el-tabs__nav')

      if (tbody) {
        this.sortable = Sortable.create(tbody, {
          animation: 250,
          sort: true,
          handle: '.is-closable',
          onEnd: (/**Event*/ evt) => {
            if (evt.newIndex == evt.oldIndex) {
              return
            }
            let arr = JSON.parse(
              JSON.stringify(
                this.sortArr.length > 0
                  ? this.sortArr
                  : this.form.ccCourseContentList
              )
            )
            let oldIndex = evt.oldIndex
            let newIndex = evt.newIndex
            let element = arr[oldIndex]
            // 从旧位置删除元素
            arr.splice(oldIndex, 1)
            // 在新位置插入元素
            arr.splice(newIndex, 0, element)

            arr.map((item, index) => {
              item.sort = index + 1
            })
            this.sortArr = arr
            let ids = arr.map((item) => {
              return item.contentId
            })
            sortCourseContent(ids.join(',')).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess('排序成功')
              }
            })
          }
        })
      }
    },
    // 初始化组件数据
    reset() {
      this.form = {}
      this.resetForm('form')
    },
    async handleSubmitForm() {
      const loading = this.$loading({
        lock: true,
        text: '正在保存...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.3)'
      })
      this.submitForm(false, loading)
      this.$modal.msgSuccess('保存成功')
    },
    // 修改当前教学内容和内容层信息
    async submitForm(lastForm, loading) {
      if (this.type == 'edit' || this.type == 'add') {
        //保存当前选中富文本内容start>>>>>>>>>
        //判断是否有lastForm，有则表示保存的时上一个组件的内容  没有就直接取this.form
        let params
        if (lastForm) {
          params = lastForm.ccCourseContentList[lastForm.lastStepIndex]
        } else {
          params = this.form.ccCourseContentList[this.stepIndex]
        }
        //ccCourseContentList  数组不为空时保存教学内容
        if (params) {
          delete params.sort
          delete params.status
          try {
            let res = await editCourseContent(params)
            console.log(res, '保存当前选中教学内容')
          } catch (e) {
            if (loading) {
              loading.close()
            }
          }
        }
        //保存当前选中富文本内容end>>>>>>>>>>>
        let data = lastForm ? lastForm : this.form
        let sortedData = {
          ...data
        }
        delete sortedData.ccCourseContentList
        delete sortedData.name
        delete sortedData.submitType
        delete sortedData.sort
        delete sortedData.scorePercentage
        delete sortedData.status
        try {
          let res = await editCourseIndex(sortedData)
          if (res && loading) {
            this.sortArr = []
            loading.close()
          }
        } catch (e) {
          if (loading) {
            loading.close()
          }
        }
      }
    },
    goBack() {
      if (this.enterType == 'manager') {
        this.$store.dispatch('tagsView/delView', this.$router.currentRoute)
        setTimeout(() => {
          this.$router.go(-1)
        }, 100)
      } else {
        this.$router.go(-1)
      }
    },
    addlibraryFile(data) {
      data.arr.forEach((e) => {
        e.contentId = this.form.ccCourseContentList[this.stepIndex].contentId
        if (
          !this.form.ccCourseContentList[this.stepIndex].ccCourseContentFileList
        ) {
          this.form.ccCourseContentList[
            this.stepIndex
            ].ccCourseContentFileList = []
        }
        this.form.ccCourseContentList[
          this.stepIndex
          ].ccCourseContentFileList.push(e)
      })
      this.$modal.msgSuccess('插入成功')
    }
  }
}
</script>
<style>
.work_type {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e4edfe;
  border-radius: 8px 8px 0 0;
  border: 1px solid #ccdeff;
  color: #4e8dff;
  padding: 0 20px;
  box-sizing: border-box;
}

.things_type {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e4fff7;
  border-radius: 8px 8px 0 0;
  border: 1px solid #aef3df;
  color: #28b28b;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.addbtns {
  display: flex;
  align-items: flex-end;
  margin-left: 10px;
  gap: 10px;

  .btn_item {
    width: 88px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #ccdeff;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #4e8dff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    i {
      margin-right: 4px;
      font-size: 16px;
    }

    &:hover {
      background: #4e8dff;
      color: #ffffff;
      border: 0;
    }
  }

  .btn_items {
    width: 88px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #aef3df;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #28b28b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    i {
      margin-right: 4px;
      font-size: 16px;
    }

    &:hover {
      background: #28b28b;
      color: #ffffff;
      border: 0;
    }
  }

  .btn_edit {
    width: 88px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #f5998a;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #ff7b5e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    i {
      margin-right: 4px;
      font-size: 16px;
    }

    &:hover {
      background: #ff7b5e;
      color: #ffffff;
      border: 0;
    }
  }
}

.detailbottom {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  align-items: center;

  ::v-deep .el-button {
    padding: 0 24px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    border-radius: 8px;
    line-height: 38px;
    height: 40px;
  }

  .questionBtn {
    height: 32px;
    background: #fff0df;
    border-radius: 8px;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #f89a33;

    img {
      margin-right: 6px;
      width: 12px;
      height: 12px;
    }

    padding: 0 10px;
  }

  .practiceBtn {
    background: #fead22 !important;

    &:hover {
      border: 1px solid #fead22 !important;
    }
  }

  .not_publish_practice {
    background: rgba($color: #fead22, $alpha: 0.1) !important;
    color: #fead22 !important;
    border: 1px solid #fead22 !important;
    box-sizing: border-box;
  }

  .examBtn {
    background: #fa6400 !important;

    &:hover {
      border: 1px solid #fa6400 !important;
    }
  }

  .not_publish_exam {
    background: rgba($color: #fa6400, $alpha: 0.1) !important;
    color: #fa6400 !important;
    border: 1px solid #fa6400 !important;
    box-sizing: border-box;
  }

  .homeworkBtn {
    background: #4e8dff !important;

    &:hover {
      border: 1px solid #4e8dff !important;
    }
  }

  .not_publish_homework {
    background: rgba($color: #4e8dff, $alpha: 0.1) !important;
    color: #4e8dff !important;
    border: 1px solid #4e8dff !important;
    box-sizing: border-box;
  }

  .normalBtn {
    box-sizing: border-box;
    padding: 0 16px;
    margin-left: 16px;
    align-items: center;
    text-align: center;
    height: 32px;
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: white;

    .activeIcon {
      display: none;
    }

    .icon {
      display: none;
    }

    .del {
      display: none;
      width: 14px;
      height: 14px;
      top: -4px;
      right: -4px;
    }
  }

  .normalBtn:hover {
    .del {
      display: block;
      width: 14px;
      height: 14px;
      top: -4px;
      right: -4px;
    }
  }

  .normalnoBtn:hover {
    color: #28b28b;

    .activeIcon {
      display: block;
    }

    .icon {
      display: none;
    }
  }

  .normalnoBtn {
    margin-left: 16px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    align-items: center;
    height: 32px;
    background: #f5f6f7;
    padding: 0 10px;
    border-radius: 8px;

    .activeIcon {
      display: none;
      margin-right: 6px;
      width: 12px;
      height: 12px;
    }

    .icon {
      display: block;
      margin-right: 6px;
      width: 12px;
      height: 12px;
    }

    .del {
      display: none;
      width: 14px;
      height: 14px;
    }
  }
}

.lookDetail {
  width: 880px;
  padding: 24px 40px 24px 40px;
  box-sizing: border-box;
  height: calc(100vh - 310px + 77px - 72px);
  overflow: auto;

  .item {
    .item_label {
      margin-right: 32px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }

    .item_value {
      width: 696px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }

  .steps {
    .content {
      margin-top: 28px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      //line-height: 22px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .fileTitle {
      margin-top: 40px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }

    .files {
      .files_file:nth-of-type(3n + 1) {
        margin: 24px 0 0 0;
      }

      .files_file {
        margin: 24px 0 0 98px;

        .icon {
          width: 32px;
          height: 32px;
          margin-right: 16px;
        }

        .filename {
          width: 149px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #333333;
          line-height: 32px;
        }
      }
    }
  }
}

.detail {
  padding-bottom: 32px;
  box-sizing: border-box;
  height: calc(100vh - 310px + 77px - 72px);
  overflow: auto;

  .add_btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 48px;
    box-sizing: border-box;

    .label {
      text-align: right;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: bold;
      color: #606266;
      margin: 0 16px 0 0;
    }
  }
}

.description {
  display: flex;
  align-items: center;
  margin-left: 48px;

  .label {
    text-align: right;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: bold;
    color: #606266;
    margin: 0 16px 0 0;
  }

  span {
    margin-left: 12px;
  }
}

.step_box {
  .tabContent {
    padding: 20px 20px 20px 0;

    .addFile {
      margin-bottom: 10px;
      padding: 0 12px;
      box-sizing: border-box;
      height: 32px;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #ffffff;
      line-height: 32px;

      img {
        margin: auto 8px auto 0;
        width: 14px;
        height: 14px;
      }
    }
  }

  &_title {
    margin: 24px 0 0 48px;

    .label_title {
      display: flex;
      align-items: center;

      .stepbox_tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #ea3555;
        margin-left: 8px;
      }
    }
  }

  .bottom_txt {
    color: #999999;
    font-size: 12px;
  }
}

.addStep {
  box-sizing: border-box;

  img {
    width: 20px;
    height: 20px;
    margin: auto 8px auto 0;
  }

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #666666;
}

.card {
  .stepbox_tabs {
    width: 800px;
    margin: 24px 0 0 48px;
  }

  .stepbox_tabs,
  .lookDetail {
    ::v-deep .el-tabs__nav-wrap {
      padding-left: 0 !important;
    }

    ::v-deep .el-tabs__new-tab {
      display: none;
    }

    ::v-deep .el-tabs__item {
      height: 40px !important;
      line-height: 40px !important;
    }

    ::v-deep .el-tabs__item:last-child {
      height: 40px !important;
      line-height: 40px !important;
    }

    ::v-deep .el-tabs__header {
      margin: 0 0 0 0;
    }
  }
}

.addflies {
  margin-bottom: 20px;
}

// 文件列表
.file:hover {
  background: rgba(204, 204, 204, 0.4);

  .del {
    display: block;
  }

  .name {
    color: rgba(39, 196, 120, 1);
  }

  .icon {
    display: none;
  }

  .iconactive {
    display: block;
  }
}

.file {
  width: 275px;
  height: 20px;

  .icon {
    display: block;
    margin: auto 3px auto 3px;
    width: 11px;
    height: 14px;
  }

  .iconactive {
    display: none;
    margin: auto 3px auto 3px;
    width: 11px;
    height: 14px;
  }

  .name {
    width: 240px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(48, 49, 51, 1);
  }

  .del {
    margin: auto 0 auto 0;
    display: none;
    width: 10px;
    height: 10px;
  }
}

::v-deep .el-icon-delete,
::v-deep .el-icon-circle-close,
::v-deep .el-icon-warning-outline,
::v-deep .el-icon-goods,
::v-deep .el-icon-plus,
::v-deep .el-icon-arrow-right {
  font-style: normal;
}

//富文本回显样式
::v-deep h5,
.h5 {
  font-size: 14px;
}

::v-deep h4,
.h4 {
  font-size: 16px;
  font-weight: bold;
}

::v-deep h3,
.h3 {
  font-size: 18px;
  font-weight: bold;
}

::v-deep h2,
.h2 {
  font-size: 20px;
  font-weight: bold;
}

::v-deep h1,
.h1 {
  font-size: 22px;
  font-weight: bold;
}

::v-deep i {
  font-style: italic;
}

::v-deep .w-e-toolbar .w-e-menu i {
  font-style: normal;
}

::v-deep ol {
  list-style-type: decimal;
}

/* ul ol 样式 */
::v-deep ol {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

::v-deep ul {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

/* table 样式 */
::v-deep table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

::v-deep table td,
::v-deep table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
  height: 32px;
}

::v-deep table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
  background-color: #f1f1f1;
}

/* blockquote 样式 */
::v-deep blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  min-height: 24px;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
::v-deep code {
  display: inline-block;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

::v-deep pre code {
  display: block;
}

::v-deep a {
  text-decoration: underline;
  color: #5592e5;
}

.content_name {
  width: 100px;
}

//内容  样式start>>>>>>>>>>>>>>>>>>>>>
::v-deep .el-tabs__item.is-top.is-closable {
  padding: 0 !important;
  border-radius: 8px 8px 0 0;
  position: relative !important;
  border: 0;
  margin-right: 4px;

  .el-icon-close {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
  }

  &:hover {
    .work_type + .el-icon-close {
      color: #4e8dff !important;

      &:hover {
        background: #ccdeff !important;
      }
    }

    .things_type + .el-icon-close {
      color: #28b28b !important;

      &:hover {
        background: #aef3df !important;
      }
    }
  }
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}

.work_type {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e4edfe;
  border-radius: 8px 8px 0 0;
  border: 1px solid #ccdeff;
  color: #4e8dff;
  padding: 0 20px;
  box-sizing: border-box;
}

.things_type {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e4fff7;
  border-radius: 8px 8px 0 0;
  border: 1px solid #aef3df;
  color: #28b28b;
  padding: 0 20px;
  box-sizing: border-box;
}

::v-deep .el-tabs__item.is-active {
  .work_type + .el-icon-close {
    color: #4e8dff !important;
  }

  .things_type + .el-icon-close {
    color: #28b28b !important;
  }

  .work_type {
    background: #ffffff !important;
  }

  .things_type {
    background: #ffffff !important;
  }
}

.work_ipt_type ::v-deep .el-input__inner {
  background: transparent;
}

.work_ipt_type ::v-deep .el-input__inner:focus {
  border-color: #ccdeff !important;
}

.things_ipt_type ::v-deep .el-input__inner {
  background: transparent;
}

.things_ipt_type ::v-deep .el-input__inner:focus {
  border-color: #aef3df !important;
}

::v-deep .el-tabs__active-bar {
  display: none;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
}

::v-deep .el-tabs__item {
  padding: 0;
  margin-right: 4px;
}

//内容  样式end>>>>>>>>>>>>>>>>>>>>>

.add_sign {
  font-size: 14px;
  color: #ff9b0f;
  margin: 10px 0 0 10px;
}
</style>
